<template>
  <div class="timer-control">
    <hourglass ref="hourglassRef"></hourglass>
    <countdown ref="countdownRef" :start-time="formattedStartTime"></countdown>
    <button class="button" v-if="!isStarted" @click="startTimer">开始计时</button>
    <button class="button" v-if="isStarted" @click="resetTimer">重新计时</button>
    <button class="button" v-if="isStarted" @click="pauseTimer">暂停</button>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import Hourglass from "@/components/hourglass.vue";
import Countdown from "@/components/countdown.vue";

const props = defineProps({
  seconds: Number
});

const formattedStartTime = computed(() => convertSecondsToTimeFormat(props.seconds));

const hourglassRef = ref(null);
const countdownRef = ref(null);
const isStarted = ref(false);

const convertSecondsToTimeFormat = (seconds) => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}:000`;
};

function startTimer() {
  isStarted.value = true;
  if (countdownRef.value) {
    countdownRef.value.startCountdown();
  }
  if (hourglassRef.value) {
    hourglassRef.value.startAnimation(props.seconds + 's');
  }
}

function resetTimer() {
  isStarted.value = false;
  if (countdownRef.value) {
    countdownRef.value.resetCountdown();
  }
}

function pauseTimer() {
  if (countdownRef.value) {
    countdownRef.value.pauseCountdown();
  }
}
</script>

<style scoped>
/* 添加所需的CSS样式 */
</style>
